<template>
	<view class="container">
		<!-- 水费/电费缴费详情 顶部图标 金额 扣款成功 -->
		<view style="display: flex; flex-direction: column; align-items: center; margin-top: 20rpx">
			<image style="width: 122rpx; height: 122rpx" :src="top_icon"></image>
			<view style="font-size: 44rpx; color: #000; margin-top: 10rpx">￥{{ detail.amount_paid }}</view>
			<view style="font-size: 28rpx; color: #000; margin-top: 10rpx">缴费成功</view>
		</view>

		<!-- 水费 已支付 -->
		<view style="display: flex; flex-direction: row; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 60rpx">
			<view style="color: #000; font-size: 36rpx">{{ type == '1' ? '水费' : '电费' }}</view>
			<view style="color: #999; font-size: 26rpx">已支付</view>
		</view>

		<!-- 图标 房间名 -->
		<view style="display: flex; flex-direction: row; align-items: center; margin-left: 20rpx; margin-top: 60rpx">
			<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx"></image>
			<view style="color: #000; font-size: 30rpx; margin-left: 20rpx; flex-grow: 1">{{ detail.name }}</view>
			<!-- <view style="color: #00BE6E; font-size: 28rpx; margin-left: 20rpx;margin-right: 20rpx;">面积：200㎡</view> -->
		</view>

		<!-- 分割线 -->
		<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 16rpx"></view>

		<!-- 业主 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">业主：{{ detail.owner_name }}</view>
		</view>

		<!-- 户号 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">户号：{{ detail.code }}</view>
		</view>

		<!-- 收款单位 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">收款单位：昊昀园区物业</view>
		</view>

		<!-- 缴费时间 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">缴费时间：{{ detail.pay_time }}</view>
		</view>

		<!-- 分割线 -->
		<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 16rpx"></view>

		<!-- 订单编号 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">订单编号：{{ detail.number }}</view>
		</view>
	</view>
</template>

<script>
	const app = getApp() // 获取应用实例
	import { getRecordDetail } from '../../../utils/http/api';
	export default {
		data() {
			return {
				// 记录传过来的id
				id: '',
				// 记录传过来的type 根据类型设置顶部的水电图标 0 房租 1 水 2 电 3 停车
				type: '',
				// 顶部的水电图标
				top_icon: '/static/assets/charge_detail_water.png',
				/** 水电费明细数据格式
				 * {id:'',name:'',owner_name:'',owner_tel:'',total_area:'',number:'',pay_time:'',code:''}
				 */
				detail: { amount_paid: '', name: '', owner_name: '', code: '', pay_time: '', number: '' }
			};
		},

		onLoad: function(options) {
			this.setData({ id: options.id, type: options.type })
			if (this.type == '2') {
				this.setData({ top_icon: '/static/assets/charge_detail_elec.png' })
			} else {
				this.setData({ top_icon: '/static/assets/charge_detail_water.png' })
			}
			this.reqChargeDetail();
		},

		methods: {
			// 请求缴费明细
			async reqChargeDetail() {
				let that = this
				let url = app.globalData.gl.url + 'api/property/house_user/finance_details'
				uni.showLoading({ title: '加载中', mask: true })
				let { code, msg, data } = await getRecordDetail({ token: app.globalData.gl.token, id: that.id })
				if (code == '1') {
					that.setData({ detail: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}
</style>